<script setup>
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts'

const echartBar = ref();
let options = reactive([])
function chartInit() {
    //图表
    const myChart = echarts.init(echartBar.value, "light", {
        width: 800,
        height: 200
    });

    var option = {
        dataZoom: [
    {
      show: true,
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: [0, 1]
    },
    {
      type: 'inside',
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: [0, 1]
    }
  ],
        title:{
            text:'软件工程TOP10考研分数',
            bottom:'285px',
            textStyle:{
                color:'white',
            }
        },
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['总分', '管综', '外语', '业务课一', '业务课二'], // 设置图例
            textStyle: {
                color: 'pink' // 设置图例文字为白色
            },
            top: '5%', // 将图例下移，避免与标题重叠
            itemGap: 20, // 设置图例项之间的间距
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel: {
                interval: 0, // 让所有的标签显示出来
                rotate: 30,  // 如果标签太多，可以稍微旋转，防止重叠
                color: '#ffffff' // 设置 x 轴标签文字颜色为白色
            },

        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#ffffff' // 设置 x 轴标签文字颜色为白色
            },
            
        },
        series: [{
            name: '总分',
            type: 'line',
            data: [],
            barWidth: '40%',
            color: '#ff4500'
        },
            {
                name: '管综',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                min:0,
            middle:100,
            max:400,
                showSymbol: false,
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#3BA272'
                        },

                    ])
                },
                emphasis: {
                    focus: 'series'
                },
            },
            {
                name: '外语',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            min:0,
            middle:100,
            max:400,
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#FDD45D'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
        },
        {
            name: '业务课一',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            min:0,
            middle:100,
            max:400,

            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#EE6666'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
        },
        {
            name: '业务课二',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            min:0,
            middle:100,
            max:400,
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color:'#7ED3F4'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
        }
        ]
    }
    const xdata = []
    const s1= []; // 最高分数据
    const s2 = []; // 最低分数据
    const s3 = [];
    const s4 = [];
    const s5 = [];
    for (let index = 0; index < options.length; index++) {
        let obj = options[index];
        xdata.push(obj.schoolName)
        s1.push(obj.totalScore); // 使用 maxScore 作为最高分
        s2.push(obj.politicsGuanzong);
        s3.push(obj.foreignLanguages);
        s4.push(obj.businessCourseOne)
        s5.push(obj.businessCourseTwo) // 使用 minScore 作为最低分  
    }
    // 配置 series 数据
    option.xAxis.data = xdata
    option.series[0].data = s1
    option.series[1].data = s2
    option.series[2].data = s3
    option.series[3].data = s4
    option.series[4].data = s5
    //图表与数据项的绑定
    myChart.setOption(option);
}

function getData() {


    i:
    //获取服务器数据
    axios.get('/Pro-Postgraduate/queryRuan')
        .then((response) => {
            console.log("********")
            //if (response.data.code == 200) {
                console.log(response.data)
                options = response.data;
                chartInit();
            //}
        })
}
onMounted(() => {
    getData();
})
</script>
<template>
        <dv-decoration-7 class="title" style="width:250px;height:30px;">软件工程TOP10考研分数</dv-decoration-7>
         <div ref="echartBar" style="width: 500px;height: 300px;padding-top: 10px;position: fixed;margin-left: -5%;margin-top:19%;">
         </div>
</template>

<style lang="css" scoped>
    .title{
        color: azure;
        position: fixed;
        left:48%;
        top:77%;
    }
</style>
